{extend name="public:jrgbase" /}
{block name="content"}
    <div class="weui-tab__panel">
        <div id='slider' class='swipe'>
            <div class='swipe-wrap'>
                {volist name="slide" id="image"}
                    <div style="background-image: url('IMG_ROOT{$image.image|resize=400}')"> </div>
                {/volist}
            </div>
            <div id="pager"> <em class="on">1</em> <em>2</em>
                <em>3</em>
            </div>
        </div>
        <ul class="top-menu">
            <li>
                <a href="{:url('/mobile')}" class="active">
                    <span class="icon top-home"></span>
                    <p>商城主页</p>
                </a>
            </li>
            <li>
                <a href="{:url('category/index')}">
                    <span class="icon top-pro"></span>
                    <p>全部商品</p>
                </a>
            </li>
            <li>
                <a href="{:url("article/getartlist")}">
                    <span class="icon top-tip"></span>
                    <p>商城公告</p>
                </a>
            </li>
            <li>
                <a href="{:url('user/index')}">
                    <span class="icon top-user"></span>
                    <p>个人中心</p>
                </a>
            </li>
        </ul>

        <div class="pro-list-container">
            <!--搜索-->
            <!--<form onsubmit='searchdo(this);return false;'>
                <div class="search">
                    <input type="search" value="" name="title" /> <a href="{:url('mobile/search/index')}">搜索</a>
                </div>
            </form>-->
            {include file="public/search" /}
            <!--商品-->

            <div class="user-list">
                <a class="weui-cell weui-cell_access mt10" href="/mobile/category/index">
                    <div class="weui-cell__hd"><span class="icon record"></span></div>
                    <div class="weui-cell__bd">
                        <p>提货领取</p>
                    </div>
                    <div class="weui-cell__ft">
                        <span>查看更多</span>
                    </div>
                </a>
            </div>
            
            <ul>
                {volist name="list1" id="goods"}
                <li>
                    <a href="{:url('goods/detail2',array('id'=>$goods['goods_id']))}">
                        <div class="pro-img" style="background-image: url('IMG_ROOT{$goods.image|resize=250,250}')"></div>
                        <p class="title">{$goods.name}</p>
                        <p class="price">
                            加工费:{$goods.price}
                            
                        </p>
                        <p class="price">
                            
                            需提货数:{$goods.pay_points}克
                            <span class="shopping-car"></span>
                        </p>
                    </a>
                </li>
                {/volist}
            </ul>
            <div class="clear"></div>
        </div>
        <div class="pro-list-container">
            <!--搜索-->
            <!--<form onsubmit='searchdo(this);return false;'>
                <div class="search">
                    <input type="search" value="" name="title" /> <a href="{:url('mobile/search/index')}">搜索</a>
                </div>
            </form>-->
           
            <!--商品-->

            <div class="user-list">
                <a class="weui-cell weui-cell_access mt10" href="/mobile/category/index">
                    <div class="weui-cell__hd"><span class="icon record"></span></div>
                    <div class="weui-cell__bd">
                        <p>菜花玉</p>
                    </div>
                    <div class="weui-cell__ft">
                        <span>查看更多</span>
                    </div>
                </a>
            </div>
            
            <ul>
                {volist name="list" id="goods"}
                <li>
                    <a href="{:url('goods/detail',array('id'=>$goods['goods_id']))}">
                        <div class="pro-img" style="background-image: url('IMG_ROOT{$goods.image|resize=250,250}')"></div>
                        <p class="title">{$goods.name}</p>
                        <p class="price">
                            {:get_goods_type_info(array('type'=>$goods['type']),'type')}:{$goods.price}
                            <span class="shopping-car"></span>
                        </p>
                    </a>
                </li>
                {/volist}
            </ul>
            <div class="clear"></div>
        </div>
    </div>
    <script type="text/javascript" src="__PUBLIC__/jrg/js/swipe.js"></script>

    <script>
        //轮播图

        /*window.mySwipe = new Swipe(document.getElementById('slider'), {
            startSlide: 2,    //  (default:0) - 开始滚动的位置
            speed: 400,   //  (default:300) - 动画滚动的间隔（秒数）
            auto: 3000,    //  开始自动幻灯片（以毫秒为单位幻灯片之间的时间）
            continuous: true,  // (default:true) - 创建一个无限的循环（当滑动到所有动画结束时是否循环滑动）
            disableScroll: false,   //  (default:true) - 创建一个无限的循环（当滑动到所有动画结束时是否循环滑动）
            stopPropagation: false,   //  (default:false) - 是否停止事件冒泡
            callback: function(index, elem) {},  // 幻灯片运行中的回调函数
            transitionEnd: function(index, elem) {}   // 动画运行结束的回调函数
        });*/

        var mySwipe = Swipe(document.getElementById('slider'), {
            // startSlide: 4,
            auto: 3000,
            // continuous: true,
            // disableScroll: true,
            // stopPropagation: true,
            callback: function(index, element) {
                slideTab(index);
            }
        });
        var bullets = document.getElementById('pager').getElementsByTagName('em');
        for (var i=0; i < bullets.length; i++) {
            var elem = bullets[i];
            elem.setAttribute('data-tab', i);
            elem.onclick = function(){
                mySwipe.slide(parseInt(this.getAttribute('data-tab'), 10), 500);
            }
        }
        function slideTab(index){
            var i = bullets.length;
            while (i--) {
                bullets[i].className = bullets[i].className.replace('on',' ');
            }
            bullets[index].className = 'on';
        }
    </script>
{/block}
